<template>
	<div class="post-wrap">
		
		<div class="tip">
			<span class="icon-wrap">
				<i class="icon iconfont ipc-message"></i>
			</span>
			

			<ol class="tip-content">
				<li>你今天还可以免费发帖1条，本月还可免费发帖30条。</li>
				<li>根据新《广告法》相关规定，请不要在发布内容中使用过分夸大的词语。</li>
				<li>向您提供网络空间技术服务，发布信息请遵守国家法律法规。</li>
			</ol>
		</div>

		<el-form
			class="post-form"
			ref="postForm"
			:model="postForm"
			label-width="100px"
		>
			<h2 class="sub-title">服务信息</h2>

			<el-form-item label="类别">
				<el-select v-model="postForm.categoryId" placeholder="请选择类别">
					<el-option
						v-for="item in cates"
						:key="item.id"
						:label="item.name"
						:value="item.id"
						@click.native="cateOptionClick(item)"
					></el-option>
				</el-select>
				
				
			</el-form-item>

			<el-form-item label="小类">
				<sub-cate
					:data.sync="subCateList"
					v-model="subCateSelected"
					:defaultSelect.sync="subCateSelected"
					@selected="subCateUpdate"
				></sub-cate>
				
			</el-form-item>

			<h2 class="sub-title">详细描述</h2>

			<el-form-item label="标题">
				<el-input v-model="postForm.title" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="上传图片">
				<upload-img
					:defaultSelect.sync="imgs"
					@success="updateImgs" 
				></upload-img>
			</el-form-item>

			<el-form-item label="详细描述">
				<el-input type="textarea" v-model="postForm.content" rows="5" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item label="大致预算">
				<el-input class="w250" v-model="postForm.budget" type="number" autocomplete="off"></el-input>
				<span class="input-unit">元</span>
			</el-form-item>

			<el-form-item label="截至日期">
				<el-date-picker
					class="w250"
      				v-model="postForm.endTime"
      				type="date"
      				placeholder="选择日期">
    			</el-date-picker>
			</el-form-item>

			<el-form-item>
				<el-button class="orange w250" type="primary" @click="post">发布</el-button>
			</el-form-item>
		</el-form>

		
	</div>
</template>


<script>
import UploadImg from './uploadImg'
import CateSelect from './cateSelect'
import SubCate from './subCate'
import { getList } from "@/api/admin/gservice"
import { edit, detail } from "@/api/post-info/post"
export default{
	components:{
		UploadImg,
		CateSelect,
		SubCate
	},
	data(){
		return {
			defaultPostForm:{
				categoryId:'',
				categoryName:"",
				secondCategoryId:'',
				secondCategoryName:"",
				title:'',
				imgIds:'',
				content:'',
				budget:'',
				endTime:'',
				status:2,
			},
			postForm:{
				categoryId:'',
				categoryName:"",
				secondCategoryId:'',
				secondCategoryName:"",
				title:'',
				imgIds:'',
				content:'',
				budget:'',
				endTime:'',
				status:1,
			},
			cateProps:{
	          	children: 'children',
	          	label: 'name',
	          	value: 'id'
	        },
			cates:[],
			subCateList:[],
			subCateSelected:[],
			imgs:[],

		}
	},
	mounted(){
		this.getGserviceList();
	},
	methods:{
		//获取类别列表
		getGserviceList(){
		    getList(1, 999).then(res => {
		        var result = res.data.data;
		        this.cates = result.records;
		        //判断是否是编辑页面
				this.isEdit();
		    });		
  		},
  		//判断是否是编辑页面
  		isEdit(){
  			var id = this.$route.query.id;
  			if(id){
  				//获取众包详情
  				detail(id).then((res) => {
  					var result = res.data.data;
  					this.postForm = result;
  					this.imgs = result.imgIds.split(",");
  					//查找已选父类
  					for(let i=0;i<this.cates.length;i++){
  						if(this.cates[i].id === result.categoryId){
  							this.subCateList = this.cates[i].children;
  						}
  					}

  					this.subCateSelected = result.secondCategoryList;
  				})
  			}
  		},
  		//选择类别
  		cateSelected(data){
  			console.log(data);

  			this.postForm.categoryId = data.parentId;
  			this.postForm.secondCategoryId = data.id;
  		},
  		cateOptionClick(item){
  			this.subCateList = item.children;
  		},
  		//小类选择更新
  		subCateUpdate(data){
  			this.subCateSelected = data;
  		},
  		//更新上传的图片
  		updateImgs(imgs){
  			var arr = [];
  			for(var i=0;i<imgs.length;i++){
  				arr.push(imgs[i].fileId)
  			};
  			this.imgs = arr;
  		},

  		//获取图片
  		getImgIds(){
  			return this.imgs.join(',');
  		},
  		//获取小类id
  		getSubCateIds(){
  			if(!this.subCateSelected.length) return '';
  			var temp = [];
  			for(let i=0;i<this.subCateSelected.length;i++){
  				temp.push(this.subCateSelected[i].id);
  			}
  			return temp.join(',');
  		},
  		post(){
  			this.postForm.imgIds = this.getImgIds();
  			this.postForm.secondCategoryId = this.getSubCateIds();
  			if(this.postForm.secondCategoryList){
  				delete this.postForm.secondCategoryList
  			}
  			edit(this.postForm).then((res) => {
  				console.log(res)
  				if(res.data.code == 200 && res.data.success == true){
  					this.$ipcTips.success("发布成功");
  					this.reset();
  				}
  			})
  		},
  		reset(){
  			this.postForm = this.defaultPostForm;
  			this.imgs = [];
  			this.subCateList = [];
			this.subCateSelected = [];
  		}
	}
}


</script>

<style>
	.gservice-cate.el-select-dropdown__item{
		height: auto;
	}
</style>


<style scoped>
.w250{
	width: 250px;
	position: relative;
}
.post-wrap{
	padding: 15px;
}
.tip{
	background: #fffbe4;
	color: #EC5025;
	padding: 15px;
	margin-bottom: 20px;
	font-size: 12px;
	position: relative;
}

.tip .icon-wrap{
	position: absolute;
	top: 30px;
	left: 15px;
}

.tip .icon-wrap .icon{
	font-size: 20px;
}

.tip-content{
	padding: 0;
	margin-left: 50px;
}
.tip-content li{
	padding: 5px 0;
}
.post-form{
	padding-right: 200px;
}

.sub-title{
	color: #000;
	font-size: 15px;
	font-weight: 700;
	padding-left: 30px;
	margin: 20px 0;
}

.input-unit{
	margin-left: 15px;
}
</style>